<template>
    <div class="box" :style="cssPost">
        <Divider :orientation="formconfig.float" v-if="!formconfig.hidden"><div class="formtitle">{{formconfig.title}}</div></Divider>
        <i-form :label-position="formconfig.position" v-if="formstatus">
            <div v-for="(item,index) in configlist" :key="index" class="list">
                <component :is="item.component" :data="item" @backdata="backdata" :formconfig="formconfig" :ispreview="true"></component>
            </div>
        </i-form>
    </div>
</template>
<script>
export default {
    props: { theme: String, config: Array, formconfig: Object },
    data() {
        //这里存放数据
        return {
            configlist:this.config,
        };
    },
    //监听属性 类似于data概念
    computed: {
        formstatus(){
            return this.$store.state.formstatus
        },
        cssPost(){
            return {'--bgColor':this.formconfig.style.background,'--labelColor':this.formconfig.style.color,'padding':this.formconfig.style.padding}
        },
        linkageEvent(){
            return this.$store.state.linkageEvent
        },
        formdata:{
            get(){
                return this.$store.state.formdata
            },
            set(val){
                this.$store.state.formdata = val
            }
        }
    },
    //监控data中的数据变化
    watch: {
    },
    //方法集合,
    methods: {
        //返回的表单数据
        backdata(name,data){
            const formdata = JSON.parse(JSON.stringify(this.formdata));

            formdata[name] = data

            this.formdata = formdata
            this.event()
        },
        //联动事件检测
        event(){
            const linkageEvent = this.linkageEvent
            for(var x in linkageEvent){
                //是否满足条件
                if(this.checkEvent(linkageEvent[x]['from'])){
                    if(linkageEvent[x]['type'] == 'hide'){
                        //隐藏操作
                        for(const v in linkageEvent[x]['obj']){
                            document.getElementById(linkageEvent[x]['obj'][v]['id']).style.display = 'none';
                        }
                    }else{
                        this.$Message[linkageEvent[x]['msgEvent']](linkageEvent[x]['msg']);
                    }
                }else{
                    if(linkageEvent[x]['type'] == 'hide'){
                        for(const v in linkageEvent[x]['obj']){
                            document.getElementById(linkageEvent[x]['obj'][v]['id']).style.display = 'block';
                        }
                    }
                }
            }
        },
        checkEvent(array){
            var status = true;
            for(var x in array){
                if(array[x]['value'] != this.formdata[array[x]['id']]){
                    status = false;
                }
            }
            return status;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        //this.gettoken()
    }
}
</script>
<style lang='less' scoped>
.box{
    background: var(--bgColor);
    height: 80vh;
    overflow: scroll;
}
.formtitle{
    color: var(--labelColor);
}
.box::-webkit-scrollbar {
    display: none;
}
</style>